<template>
  <div>
    <r-search :searchHandle="searchHandleAdd" />
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :isSelection="true"
      :isIndex="true"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />
    <r-form
      :formRules="formRulesEditPsw"
      :formHandle="formHandleEditPsw"
      :formData="formDataEditPsw"
      :formCols="formColsEditPsw"
      ref="elFormEditPsw"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    var checkpass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Enter Again PassWord"));
      } else if (value !== this.formDataEditPsw.password) {
        callback(new Error("The password is not the same!"));
      } else {
        callback();
      }
    };
    return {
      searchData: {
        userName: "",
        phone: "",
        status: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "userName",
          placeholder: "配送员Name",
          width: 170
        },
        {
          type: "input",
          prop: "phone",
          placeholder: "联系方式",
          width: 150
        },
        {
          type: "select",
          prop: "status",
          placeholder: "Status",
          width: 150,
          options: [
            {
              label: "正常",
              value: "1"
            },
            {
              label: "Frozen",
              value: "2"
            }
          ]
        }
      ],
      searchHandleAdd: [
        {
          label: "Add配送人员",
          type: "success",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormVisible()
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "配送员Name",
          prop: "userName"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "联系方式",
          prop: "phone"
        },
        {
          label: "登录账号",
          prop: "account"
        },
        {
          label: "账号Status",
          prop: "status",
          theme: e => (e.status == "2" ? "danger" : "primary"),
          formatter: e => (e.status == "2" ? "Frozen" : "正常"),
          type: "tag"
        },
        {
          label: "Operations",
          type: "button",
          width: 300,
          btnList: [
            {
              label: "Edit",
              type: "primary",
              // isShow: e => e.orderId == '123' ? true : false,
              handle: row => this.elFormDetail(row)
            },
            {
              label: "Delete",
              type: "primary",
              handle: row =>
                this.TableDel("/sys/distributor/delete", { id: row.id })
            },
            {
              label: "Change Password",
              type: "primary",
              handle: row => this.elFormDetailEditPsw(row)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        userName: "",
        phone: "",
        password: ""
      },
      formCols: [
        {
          type: "input",
          label: "配送人员Name",
          placeholder: "Please Input配送人员Name",
          width: 350,
          prop: "userName"
        },
        {
          type: "input",
          label: "联系方式",
          placeholder: "Please Input联系方式",
          width: 350,
          prop: "phone"
        },
        {
          type: "input",
          inputType: "password",
          isShow: () => {
            return this.formData.id ? false : true;
          },
          label: " 密码",
          placeholder: "Please Input密码",
          width: 350,
          prop: "password"
        }
      ],
      formRules: {
        userName: [
          { required: true, message: "配送人员Name", trigger: "blur" }
        ],
        phone: [{ required: true, message: "联系方式", trigger: "blur" }],
        password: [{ required: true, message: "密码", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],
      //密码
      formDataEditPsw: {
        password: "",
        enterPassword: ""
      },
      formColsEditPsw: [
        {
          type: "input",
          inputType: "password",
          label: " 密码",
          placeholder: "Please Input密码",
          width: 350,
          prop: "password"
        },
        {
          type: "input",
          inputType: "password",
          label: "确认密码",
          placeholder: "Please Input确认密码",
          width: 350,
          prop: "enterPassword"
        }
      ],
      formRulesEditPsw: {
        password: [{ required: true, message: "密码", trigger: "blur" }],
        enterPassword: [
          {
            required: true,
            message: "The password is not the same",
            trigger: "blur",
            validator: checkpass
          }
        ]
      },
      formHandleEditPsw: [
        {
          label: "Cancel",
          handle: e => this.elFormVisibleEditPsw()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmitEditPsw()
        }
      ]
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.tablePage.offset = this.tablePage.page;
      let param = { ...this.searchData, ...this.tablePage };
      // console.log(param);
      let res = await this.api.sendmanlist(param);
      if (res) {
        this.tablePage.total = res.data.total;
        this.tableData = res.data.list;
      }
    },
    async elFormSubmit() {
      this.formData.account = this.formData.phone;
      if (this.formData.id) {
        let res = await this.api.sendmanupdate(this.formData);
        if (res) {
          this.formData.id = "";
          this.elFormVisible();
          this.init();
        }
      } else {
        let res = await this.api.sendmanadd(this.formData);
        if (res) {
          this.elFormVisible();
          this.init();
        }
      }
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      this.formData.password = "";
      this.elFormVisible();
    },
    elFormDetailEditPsw(row) {
      Object.keys(this.formDataEditPsw).forEach(key => {
        this.formDataEditPsw[key] = row[key];
      });
      this.formDataEditPsw.id = row.id;
      this.formDataEditPsw.userName = row.userName;
      this.formDataEditPsw.account = row.account;
      this.formDataEditPsw.phone = row.phone;
      this.formDataEditPsw.password = "";
      this.elFormVisibleEditPsw();
    },
    elFormVisibleEditPsw(tit) {
      if (this.$refs.elFormEditPsw.$refs.ruleFormEditPsw) {
        this.$refs.elFormEditPsw.$refs.ruleFormEditPsw.resetFields();
        this.$data.formDataEditPsw = this.$options.data.call(
          this
        ).formDataEditPsw;
      }
      this.$refs.elFormEditPsw.dialogFormVisible = !this.$refs.elFormEditPsw
        .dialogFormVisible;
      this.$refs.elFormEditPsw.dialogFormTitle = tit
        ? tit
        : this.formDataEditPsw.id
        ? "Edit"
        : "Add";

      if (this.$refs.elFormEditPsw.dialogFormVisible) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve();
          }, 2000);
        });
      }
    },
    async elFormSubmitEditPsw() {
      let res = await this.api.sendmanupdate(this.formDataEditPsw);
      if (res) {
        this.formData.id = "";
        this.elFormVisibleEditPsw();
        this.init();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
